<template>
	<view class="category">
		<navigator class="category-item" url="/pages/index/index" v-for="item in categoryList" :key="item.id" >
			  <image class="icon" :src="item.icon"></image>
			  <text class="text">{{ item.name }}</text>
		</navigator>
	</view>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue';
import { getCategoryAPI } from '@/services/home';
import { CategoryItem } from '@/types/home.d';


defineProps<{
	categoryList: CategoryItem[] | any
}>()
</script>

<style lang="scss" scoped>
.category {
  margin: 20rpx 0 0;
  padding: 10rpx 0;
  display: flex;
  flex-wrap: wrap;
  min-height: 328rpx;

  .category-item {
    width: 150rpx;
    display: flex;
    flex-direction: column; /* 子元素垂直排列 */
		align-items: center; /* 子元素水平居中 */
		justify-content: center; /* 子元素垂直居中 */
    box-sizing: border-box;

    .icon {
			display: block;
      width: 100rpx;
      height: 100rpx;
    }
    .text {
			display: block;
			width: 100rpx;
			text-align: center; /* 确保文字水平居中 */
      font-size: 26rpx;
      color: #666;
    }
  }
}
</style>